{% extends 'blog_base.html' %} 

{% block title %}注册{% endblock %} 

{% block head %}
  <script src="{% static 'js/register.js' %}"></script>
{% endblock %}

{% block main %}
<div class="m-auto" style="max-width: 300px">
  <h1>注册</h1>
  <form action="" method="post">
    <!-- 防止csrf攻击 -->
    {% csrf_token %}
    <div class="mb-3">
      <label>用户名</label>
      <input
        type="text"
        name="username"
        value="{{userInfo.username}}"
        class="form-control"
        placeholder="用户名"
      />
      <div style="color: red;">{{err.username.0.message}}</div>
    </div>
    <div class="mb-3">
      <label>邮箱</label>
      <input
        type="email"
        name="email"
        value="{{userInfo.email}}"
        class="form-control"
        placeholder="邮箱"
      />
      <div style="color: red;">{{err.email.0.message}}</div>
    </div>
    <div class="mb-3">
      <label>验证码</label>
      <div class="input-group">
        <input type="text" name="captcha" value="{{userInfo.captcha}}" class="form-control" placeholder="验证码" />
        <button class="btn btn-outline-secondary" type="button" id="captcha-btn">
          获取验证码
        </button>
      </div>
      <div style="color: red;">{{err.captcha.0.message}}</div>
    </div>
    <div class="mb-3">
      <label>密码</label>
      <input
        type="password"
        name="password"
        value="{{userInfo.password}}"
        class="form-control"
        placeholder="密码"
      />
      <div style="color: red;">{{err.password.0.message}}</div>
    </div>
    <div class="mb-3">
      <button class="btn btn-primary w-100">立即注册</button>
    </div>
  </form>
</div>
{% endblock %}
